import Imagelocation from '@/components/Imagelocation';
import { checkProductIsSoldOut } from '@/dataTransfer/product';
import pZhekou from '@/images/common/zhekou.png';
import { Image, View } from '@tarojs/components';
import React from 'react';
import { ActivityType } from '../../constants';
import ImgCover from '../../imgCover';
import styles from './index.module.scss';

const ProductImg = ({ product, goProduct }) => {
  const { productReleaseImg, deliveryStatus, favouredStatus, activityType } = product ?? {};

  // 商品此地区无货
  const isDeliveryDisabled = deliveryStatus === 2;
  // 已售罄
  const isSoldOut = checkProductIsSoldOut(product, 'inventoryQuantity');
  // 活动已结束
  const isActivityEnd = favouredStatus === '2';

  // 折扣活动
  const isOff = activityType === ActivityType.off;

  return (
    <View
      className={styles.ProductImg}
      onClick={() => {
        goProduct(product);
      }}
    >
      {isActivityEnd ? (
        <ImgCover txt="已结束" />
      ) : isSoldOut ? (
        <ImgCover txt="已售罄" />
      ) : isDeliveryDisabled ? (
        <ImgCover txt="已售罄" />
      ) : null}

      <Imagelocation className="gIcon" src={productReleaseImg} />

      {isOff && <Image className="bqImg zhekou" src={pZhekou} />}
    </View>
  );
};

export default ProductImg;
